<nz-spin [nzSpinning]="isSpinning">
    <div style="height: 450px;">
        <div style="width: 49%;float: left">
            <form nz-form [formGroup]="validateForm">
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                        <label for="roleName" nz-form-item-required>角色名称</label>
                    </div>
                    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback [nzValidateStatus]="getFormControl('roleName')">
                        <nz-input formControlName="roleName" [nzId]="'roleName'"  [(ngModel)]="sysRoleBean.roleName" name="roleName" [nzPlaceHolder]="'请输入角色名称'"></nz-input>
                        <div nz-form-explain *ngIf="getFormControl('roleName').dirty&&getFormControl('roleName').hasError('required')">角色名称不能为空!</div>
                    </div>
                </div>
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                        <label for="roleDescribe" nz-form-item-required>角色描述</label>
                    </div>
                    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24"  nzHasFeedback  [nzValidateStatus]="getFormControl('roleDescribe')" >
                        <nz-input name="roleDescribe" formControlName="roleDescribe" [nzId]="'roleDescribe'"  [(ngModel)]="sysRoleBean.roleDescribe" [nzPlaceHolder]="'请输入角色描述'"></nz-input>
                        <div nz-form-explain *ngIf="getFormControl('roleDescribe').dirty&&getFormControl('roleDescribe').hasError('required')">角色描述不能为空!</div>
                    </div>
                </div>
            </form>
        </div>
        <div style="width: 49%;float: right;font-size: 1rem;
        min-height: 400px;max-height: 400px;overflow-y: scroll;overflow-x: hidden;
        border: 1px solid #ceb437;border-radius: 5px">
            <nz-table #nzTable [nzDataSource]="data" [nzIsPagination]="false" >
                <thead nz-thead>
                </thead>
                <tbody nz-tbody>
                <ng-template ngFor let-data [ngForOf]="nzTable.data">
                    <ng-template ngFor let-item [ngForOf]="expandDataCache[data.authorId]">
                        <tr nz-tbody-tr *ngIf="(item.parent&&item.parent.expand)||!(item.parent)">
                            <td nz-td>
                                <nz-row-indent [nzIndentSize]="item.level"></nz-row-indent>
                                <nz-row-expand-icon [(nzExpand)]="item.expand" (nzExpandChange)="collapse(expandDataCache[data.authorId],item,$event)" [nzShowExpand]="(item.childList.length>0)">
                                </nz-row-expand-icon>
                                <label nz-checkbox  [(ngModel)]="item.checked" (ngModelChange)="refreshStatus($event,item.authorId)">
                                </label>
                                {{item.authorName}}
                            </td>
                        </tr>
                    </ng-template>
                </ng-template>
                </tbody>
            </nz-table>
        </div>
    </div>
    <div style="text-align: center;">
        <button nz-button (click)="submitForm()" [nzSize]="'large'" [nzType]="'primary'">新增</button>
    </div>

</nz-spin>
